<script setup>
import { userAPI, itemAPT } from '@/api/user.js'
import { ref, onMounted } from "vue"
import { useRouter } from 'vue-router'
import dayjs from "dayjs";
import { ElMessage, ElMessageBox } from 'element-plus'
import { StarFilled, ChatDotRound,Search,UserFilled,Tools,Edit,Document,Present,Odometer} from '@element-plus/icons-vue'
import {useUserStore} from "@/stores/userStore.js";

const open = () => {
  ElMessageBox.prompt('请输入你要搜索的内容', {
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
    .then(() => {
      ElMessage({
        type: 'success',
        message: `确认成功`,
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消成功',
      })
    })
}
const router = useRouter()
const onClick=(id)=>{
  router.push('/detail?id=' + id)
}

const onEdit=(id)=>{
  router.push('/publish?id=' + id)
}

const activeItem1 = ref(null)
const activeItem2=ref(null)
const handleHighlight1 = (item) => {
  activeItem1.value = item
}
const handleHighlight2 = (item) => {
  activeItem2.value = item
}

const userStore = useUserStore()
const userData = ref({})
onMounted(async () => {
  try {
    //获取用户id等
    const res1 = await userAPI(+userStore.userInfo.userId)
    if (res1.code === 200) {
      userData.value=res1.data
    }
  } catch (error) {
    ElMessage.error('获取用户数据失败')
  }
})

const useCurrent = ref([])
onMounted(async()=>{
  try{
    const res2 = await itemAPT()
    useCurrent.value = res2.data
  } catch (error) {
    ElMessage.error('获取用户数据失败', error)
  }

})


</script>

<template>
  <!-- 总的可视区的盒子 -->
  <div class="body">
    <!-- 中心的那个大盒子 -->
    <div class="main">
      <!-- 顶部大盒子 -->
      <div class="head">
        <img src="../../../assets/images/avatar.png" alt="头像">
        <span class="detail">
          <p style="font-size: 17px;"><strong>{{ userData.username }}<el-icon color="green" style="margin-left: 10px;">
                <UserFilled />
              </el-icon></strong></p>
          <span class="num">
            <span style="margin-top: 15px;"><a href="#"><strong style="font-size: 17px;">135</strong> 总访数量</a></span>
            <span style="margin-top: 15px;"><a href="#"><strong style="font-size: 17px;">167</strong> 原创</a></span>
            <span style="margin-top: 15px;"><a href="#"><strong style="font-size: 17px;">1040</strong> 排名</a></span>
            <span style="margin-top: 15px;"><a href="#"><strong style="font-size: 17px;">107</strong> 粉丝</a></span>
            <span style="margin-top: 15px;"><a href="#"><strong style="font-size: 17px;">125</strong> 铁粉</a></span>
          </span>
          <div class="per">电话号码：{{ userData.phone }}</div>
          <div class="per">更新时间： {{ dayjs(userData.createTime).format("YYYY-MM-DD HH:MM") }}</div>
          <div class="per"><a href="#">查看详细资料<div class="three"></div></a></div>
        </span>
        <div class="mb-4" id="use">
          <el-button round size="default"><el-icon style="margin-right: 5px;">
            <Edit />
          </el-icon>编辑资料</el-button>
          <el-button round size="default"><el-icon style="margin-right: 5px;">
            <Tools />
          </el-icon>设置</el-button>
          <el-button round size="default"><el-icon style="margin-right: 5px;">
            <Document />
          </el-icon>管理博文</el-button>
        </div>
      </div>

      <div class="bottom">
        <!-- 左边那个导航栏 -->
        <div class="center">
          <div class="left" style="z-index: 1;">
            <div class="power">
              <p class="p">原力等级</p>
              <div>
              <span>
                <div class="current">当前等级</div>
                <div>3</div>
              </span>
                <span>
                <div class="current">当前总分</div>
                <div>123</div>
              </span>
                <span>
                <div class="current">当月</div>
                <div>23</div>
              </span>
              </div>
            </div>
            <div class="success">
              <p class="p">个人成就</p>
              <div class="obtain"><span><el-icon color="red" size="22px"
                                                 style="vertical-align: bottom; margin-right: 10px;">
                  <Present />
                </el-icon>获得222次点赞</span></div>
              <div class="obtain"><el-icon color="skyblue" size="22px"
                                           style="vertical-align: bottom; margin-right: 10px;">
                <ChatDotRound />
              </el-icon><span>内容获得2次评论</span></div>
              <div class="obtain"><el-icon color="orange" size="25px" style="vertical-align: bottom; margin-right: 10px;">
                <StarFilled />
              </el-icon><span>获得22次收藏</span></div>
            </div>
          </div>
        </div>

        <!-- 右边那个导航栏 -->
        <div class="right" style="z-index: 1;">
          <div class="content">
          <span><a href="#" @click="handleHighlight2('recen')"
                   :class="{ 'highlighted': activeItem2 === 'recen' }">最近</a></span>
            <span><a href="#" @click="handleHighlight2('article')"
                     :class="{ 'highlighted': activeItem2 === 'article' }">文章</a></span>
            <span><a href="#" @click="handleHighlight2('store')"
                     :class="{ 'highlighted': activeItem2 ==='store' }">代码仓</a></span>
            <span><a href="#" @click="handleHighlight2('source')"
                     :class="{ 'highlighted': activeItem2 ==='source' }">资源</a></span>
            <span><a href="#" @click="handleHighlight2('answer')"
                     :class="{ 'highlighted': activeItem2 === 'answer' }">问答</a></span>
            <span><a href="#" @click="handleHighlight2('item')"
                     :class="{ 'highlighted': activeItem2 === 'item' }">帖子</a></span>
            <span><a href="#" @click="handleHighlight2('video')"
                     :class="{ 'highlighted': activeItem2 === 'video' }">视频</a></span>
            <span><a href="#" @click="handleHighlight2('lesson')"
                     :class="{ 'highlighted': activeItem2 === 'lesson' }">课程</a></span>
            <span><a href="#" @click="handleHighlight2('collect')"
                     :class="{ 'highlighted': activeItem2 === 'collect' }">收藏</a></span>
            <div @click="handleSearchClickFn" class="mb-4">
              <el-button round @click="open" size="default">搜索 <el-icon ><Search /></el-icon></el-button>
            </div>
          </div>
          <div class="sum">
            <!-- 滚动条 -->
            <el-scrollbar height="400px">
              <div v-for="item in useCurrent" :key="item.id" class="item scrollbar-demo-item">
              <span class="light-pic" @click="onClick(item.id)">
                <img v-if="item.images" :src="item.images">
                <img v-else src="@/assets/images/notImg.png">
              </span>
                <span class="light-item" @click="onClick(item.id)">
                <h4>{{ item.title }}</h4>
                <p v-html="item.content"></p>
                <div class="blog">
                  <span>发布博客： {{ dayjs(item.createTime).format("YYYY-MM-DD HH:MM") }}</span>
                  <span>{{ item.liked }} 点赞</span>
                  <span>{{ item.comments }} 评论</span>
                </div>
              </span>
                <span @click="onEdit(item.id)"><el-button type="primary" :icon="Edit" /></span>
              </div>
            </el-scrollbar>
          </div>

        </div>
      </div>

    </div>
  </div>
</template>

<style scoped>
.body{
  display: flex;
  width: 100%;
  height: 100%;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-color: rgb(255, 254, 254);
}
.main{
  width: 80%;
  margin: auto;
  margin-top: 50px;
  height: 100%;
  background-color: rgb(255, 255, 255);
  z-index: 1;
  position: relative;
}

.head{
  position: relative;
  width: 100%;
  height: 220px;
  background-color: rgb(255, 255, 255);
  margin-bottom: 20px;
  border: 1px solid rgb(229, 229, 230);
  padding-bottom: 20px;
  border-radius: 5px;
}
.head img{
  width: 120px;
  height: 120px;
  display: inline-block;
  position: relative;
  margin-left: 25px;
  margin-right: 25px;
  border-radius: 50%;
  background-color: black;
}
.head .detail{
  font-size: 14px;
  color: rgb(76, 78, 80);
  margin-left: 30px;
  margin-top: 20px;
  display: inline-block;
}
.head .detail p{
  margin-top: 10px;
  margin-bottom: 10px;
}
.head .detail .num a{
  text-decoration: none;
  color: rgb(76, 78, 80);
}
.head .num span{
  margin-right: 10px;
  margin-top: 20px;
}
.head .per{
  margin-top: 10px;
}
.head .per a{
  text-decoration: none;
  color:rgb(76, 78, 80);
}
#use a{
  text-decoration: none;
  color: rgb(73, 78, 83);
}
#use div{
  border: 1px solid rgb(73, 78, 83);
  text-align: center;
  width: 85px;
  height: 30px;
  line-height: 30px;
  border-radius: 50px;
  display: inline-block;
  margin-right: 20px;
}
#use{
  position: absolute;
  top: 30px;
  right: 10px;
}
.three {
  margin-bottom:-5px;
  margin-left: 5px;
  display: inline-block;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: rgb(100, 97, 99);
}
.center {
  width:30%;
  height: 500px;
  display: inline-block;
}
.left{
  border: 1px solid rgb(229, 229, 230);
  position: absolute;
  border-radius: 5px;
  display: inline-block;
  width: 30%;
}
.left .power{
  display: inline-block;
  width: 100%;
  height: auto;
}
.left .power .current{
  color:rgb(108, 102, 102) ;
  font-size: 14px;
}
.left .p{
  font-weight: 700;
  height: 40px;
  padding-left: 10px;
  line-height: 40px;
  border-bottom:1px solid  rgb(227, 226, 226);
}

.left .power span{
  display: inline-block;
  margin-left: 40px;
}
.left .power span div{
  margin-top: 10px;
  margin-bottom: 15px;
  text-align: center;
}
.left .success{
  width: 100%;
  display: inline-block;
  height: auto;
  border-top: 1px solid rgb(229, 229, 230);
}
.left .success el-icon{
  vertical-align: center;
}
.left .success .obtain{
  margin-left: 20px;
  color: rgb(88, 88, 88);
  margin-top: 15px;
  margin-bottom: 20px;
}
.left .success .obtain span{
  display: inline-block;
  margin-top: 15px;
}
.right{
  border: 1px solid rgb(229, 229, 230);
  padding-bottom: 3%;
  border-radius: 5px;
  display: inline-block;
  width: 68%;
  background-color: rgb(255, 255, 255);
  margin-left: 2%;
}

.right .mb-4{
  margin-left: 8%;
  display: inline-block;
}
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
.right .content{
  margin-left: 2%;
  width: 95%;
  height: 18%;
  line-height: 40px;
  background-color: rgb(255, 255, 255);
  border-bottom: 0.5px solid rgb(227, 226, 226);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 5px;
}
.right .content span{
  margin-left: 4%;
}
.right .content a{
  text-decoration: none;
  color: rgb(73, 78, 83);
  font-size: 15px;
}
.right .clafy a.highlighted {
  color: rgb(230, 83, 25);
  font-weight: bold;
}
.right .content a.highlighted {
  color: rgb(230, 83, 25);
  font-weight: bold;
}
.right .clafy{
  width: 95%;
  background-color: rgb(255, 255, 255);
  border-top: 0.5px solid rgb(227, 226, 226);
  display: flex;
  justify-content: center;
  align-items: center;
}
.right .clafy a{
  text-decoration: none;
  font-size: 16px;
  color: rgb(73, 78, 83) ;
}
.right .clafy span{
  margin-right: 6%;
  margin-left: 8%;
}
.right .clafy .mb-4{
  display: inline-block;
  margin-left: 9%;
  margin-top: 2%;
}
.right .item {
  width: 90%;
  height: 100%;
  margin-left: 5%;
  margin-bottom: 4%;
  margin-top: 2%;
  background-color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.item .light-pic{
  width: 30%;
  height: 100%;
}
.item .light-item{
  width: 60%;
}
.item img{
  vertical-align: bottom;
  display: inline-block;
  width: 90%;
  height: 125px;
  border-radius: 5px;
}
.item h4{
  display: inline-block;
  width: 40%;
  margin-bottom: 2%;
  font-size: 17px;
  color: rgb(73, 78, 83);
}
.item p{
  display: inline-block;
  width: 100%;
  margin-top: 1%;
  margin-bottom: 3%;
  font-size: 15px;
  color: rgb(73, 78, 83);
  overflow: hidden;
  text-overflow: ellipsis;
  /* 弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  -webkit-line-clamp: 2;
  /* 设置或检索伸缩盒子对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}
.item .blog span {
  margin-right: 4%;
}
.item span {
  display: inline-block;
  font-size: 14px;
  color: rgb(73, 78, 83);
}

.bottom {
  display: flex;
  align-items: start;
}
</style>
